import React, { useState, useEffect, useRef, forwardRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Message } from '../types';
import { formatMessageTime, formatAudioDuration } from '../../../../hooks/audioUtils';
import { LoadingAnimation as BaseLoadingAnimation } from './LoadingBubble';// 导入基本LoadingAnimation用于常规加载状态
import useIsMobile from '../../../../hooks/isMoboile';
import ImageLottie from '../LottieGif/ImageLottie'; //图片等待动画
import VoiceIcon from './VoiceIcon'; // 导入自定义音波图标
import VoiceTurnText from "@/assets/images/openTurnFont.png" //打开语音转文字的按钮
import CloseTurnText from "@/assets/images/closeTurnFont.png" //关闭语音转文字的按钮
import VoiceLoading from "@/assets/images/VoiceLoading.gif"// 声音 Loading 图片


interface LoadingAnimationProps { size?: 'small' | 'medium' | 'large'; }
// 包装LoadingAnimation组件以支持size属性
const LoadingAnimation: React.FC<LoadingAnimationProps> = ({ size = 'medium' }) => {
  // 这里可以根据size属性调整动画大小，但目前仅传递基础组件
  return <BaseLoadingAnimation />;
};

interface MessageBubbleProps {
  message: Message;
  userAvatar?: string;
  aiAvatar?: string;
  aiName?: string; // 新增：AI的名字
  onAudioReplay?: (messageId: string, audioData: string) => void;
  onMobilePlayStart?: (messageId: string) => void; // 新增：移动端播放按钮点击
  onAudioPause?: (messageId: string) => void; // 新增：暂停播放
  scrollToBottom?: () => void; // 新增：滚动到底部函数
  onImagePreview?: (imageUrl: string) => void; // 新增：图片预览回调
  chatService?: any; // 新增：ChatService实例，用于从缓存播放音频
}

// 辅助函数：判断消息是否为成功状态
const isStatusSuccess = (status: string) => ['completed', 'Success', 'Read', 'Unread'].includes(status);
// 辅助函数：判断消息是否为失败状态
const isStatusFailure = (status: string) => ['failed', 'Failure'].includes(status);

/**
 * 消息气泡组件
 * 支持文本和音频消息的显示，包括所有状态：loading、streaming、playing、completed
 */
const MessageBubble = forwardRef<HTMLDivElement, MessageBubbleProps>(({
  message,
  userAvatar,
  aiAvatar,
  aiName,
  onAudioReplay,
  onMobilePlayStart,
  onAudioPause,
  scrollToBottom,
  onImagePreview,
  chatService
}, ref) => {
  const { t } = useTranslation();
  const isMobile = useIsMobile();
  const isUser = message.sender === 'user';
  const isStreaming = message.status === 'streaming' || message.isStreaming === true;
  const isWaiting = message.status === 'sending' && message.sender === 'ai';

  // 图片加载状态 - 统一处理从消息等待到图片渲染完成的整个loading过程
  const [imageLoading, setImageLoading] = useState(() => {
    // 智能初始化：如果消息已完成且有imageUrl，默认不显示loading
    // 这样可以避免刷新后图片缓存导致的持续loading问题
    if (message.type === 'image' && message.imageUrl && message.status !== 'sending') {
      return false;
    }
    return true;
  });
  const [imageError, setImageError] = useState(false);

  // 添加虚拟进度百分比的useState（移到组件顶层）
  const [progress, setProgress] = useState(0);

  // 新增：组件卸载标记，用于防止组件卸载后状态更新
  const isUnmountedRef = useRef(false);

  // 新增：语音转文字展开状态
  const [showVoiceText, setShowVoiceText] = useState(false);

  // 新增：流式显示的文本内容
  const [streamingText, setStreamingText] = useState('');
  // 新增：是否正在流式显示
  const [isTextStreaming, setIsTextStreaming] = useState(false);
  // 新增：流式显示的计时器
  const streamTimerRef = useRef<NodeJS.Timeout | null>(null);

  // 组件卸载时设置标记和清除计时器
  useEffect(() => {
    return () => {
      isUnmountedRef.current = true;
      if (streamTimerRef.current) {
        clearInterval(streamTimerRef.current);
        streamTimerRef.current = null;
      }
    };
  }, []);

  // 新增：处理语音转文字的流式显示
  useEffect(() => {
    // 当展开状态变为true时，开始流式显示
    if (showVoiceText && message.content && !isTextStreaming) {
      // 重置流式文本
      setStreamingText('');
      setIsTextStreaming(true);

      let currentIndex = 0;
      const fullText = message.content;

      // 创建计时器，每50ms显示一个新字符
      streamTimerRef.current = setInterval(() => {
        if (currentIndex <= fullText.length) {
          setStreamingText(fullText.substring(0, currentIndex));
          currentIndex++;
        } else {
          // 显示完成，清除计时器
          if (streamTimerRef.current) {
            clearInterval(streamTimerRef.current);
            streamTimerRef.current = null;
            setIsTextStreaming(false);
          }
        }
      }, 50); // 调整速度，数值越小越快
    } else if (!showVoiceText && streamTimerRef.current) {
      // 当收起时，清除计时器
      clearInterval(streamTimerRef.current);
      streamTimerRef.current = null;
      setIsTextStreaming(false);
    }

    return () => {
      // 清理函数
      if (streamTimerRef.current) {
        clearInterval(streamTimerRef.current);
        streamTimerRef.current = null;
      }
    };
  }, [showVoiceText, message.content]);

  // 进度动画效果（移到组件顶层）
  useEffect(() => {
    // 图片消息的loading状态判断，失败时不显示进度动画
    const shouldShowLoadingMessage = message.type === 'image' &&
      ((isWaiting && !message.imageUrl) || (message.imageUrl && imageLoading)) &&
      message.status !== 'failed';

    if (shouldShowLoadingMessage) {
      const interval = setInterval(() => {
        setProgress(prev => {
          const next = prev + Math.random() * 15;
          return next > 95 ? 95 : next;
        });
      }, 800);

      return () => clearInterval(interval);
    } else {
      // 重置进度
      setProgress(0);
    }
  }, [message.type, isWaiting, message.imageUrl, imageLoading, message.status]);

  // 图片URL处理函数 - 添加OSS图片处理参数
  const processImageUrl = (url: string | undefined): string | undefined => {
    if (!url) return url;

    // 检查URL是否已经包含查询参数
    const separator = url.includes('?') ? '&' : '?';

    // 添加OSS图片处理参数：调整宽度为700px
    return `${url}${separator}x-oss-process=image/resize,w_500`;
  };

  // 当消息或图片URL变化时重置状态
  React.useEffect(() => {
    if (message.type === 'image') {
      // console.log('🔄 重置图片加载状态:', {
      //   messageId: message.id,
      //   imageUrl: message.imageUrl,
      //   status: message.status,
      //   hasImageUrl: !!message.imageUrl
      // });

      // 如果消息状态为失败，立即清除loading状态
      if (isStatusFailure(message.status)) {
        setImageLoading(false);
        setImageError(false);
        return;
      }

      // 如果消息已完成但没有图片URL，不应该显示loading
      if (isStatusSuccess(message.status) && !message.imageUrl) {
        setImageLoading(false);
        setImageError(false);
        return;
      }

      // 智能状态重置逻辑
      if (message.status === 'sending' || (!message.imageUrl && message.status !== 'Success')) {
        // 消息正在发送或没有图片URL时(且不是Success状态)，显示loading
        setImageLoading(true);
      } else if (message.imageUrl) {
        // 有图片URL时，先检查图片是否已经缓存
        const img = new Image();
        img.onload = () => {
          // 图片已缓存，直接显示
          setImageLoading(false);
        };
        img.onerror = () => {
          // 图片加载失败，显示loading等待重试
          setImageLoading(true);
        };
        // 开始检查前先设置为loading
        setImageLoading(true);
        img.src = processImageUrl(message.imageUrl) || message.imageUrl;
      }
      setImageError(false);
    }
  }, [message.id, message.imageUrl, message.type, message.status]);

  // 计算语音消息动态展示消息气泡框宽度的函数
  const getAudioBubbleWidth = (duration?: number): React.CSSProperties => {
    if (!duration || duration <= 0) {
      // 如果没有时长信息，使用默认最小宽度
      return { minWidth: '3rem' };
    }

    // 基础宽度3rem + 每秒0.2rem，最大12rem
    const baseWidth = 3; // rem
    const perSecondIncrease = 0.3; // rem
    const maxWidth = 12; // rem

    const calculatedWidth = Math.min(baseWidth + duration * perSecondIncrease, maxWidth);

    return {
      width: `${calculatedWidth}rem`,
      minWidth: '3rem'
    };
  };

  // 渲染AI消息内容
  const renderAIMessageContent = () => {
    // AI消息失败状态 - 优先处理失败状态
    if (isStatusFailure(message.status)) {
      // 文本消息失败状态
      if (message.type === 'text') {
        return (
          <div className="text-white break-words whitespace-pre-wrap">
            <div className="flex items-center space-x-2 text-red-400">
              <i className="fas fa-exclamation-triangle"></i>
              <span className="text-sm">{t('chat.sendFailedMation')}</span>
            </div>
          </div>
        );
      }
      // 语音消息失败状态
      else if (message.type === 'audio') {
        return (
          <div className="flex items-center space-x-2 text-red-400" style={getAudioBubbleWidth(message.duration)}>
            <i className="fas fa-exclamation-triangle"></i>
            <span className=" text-sm">{t('chat.sendFailedMation')}</span>
          </div>
        );
      }
      // 图片消息失败状态
      else if (message.type === 'image') {
        return (
          <div className="flex items-center justify-center bg-gray-800 rounded-xl p-4">
            <div className="text-center text-gray-400">
              <i className="fas fa-exclamation-triangle text-2xl mb-2"></i>
              <div className="text-sm text-red-400">{t('chat.sendFailedMation')}</div>
            </div>
          </div>
        );
      }
    }

    // AI消息等待状态 - 对于图片消息，跳过这里的loading，让图片渲染逻辑统一处理
    if (isWaiting) {
      // 图片消息等待状态 - loading显示
      if (message.type === 'image') {
      }
      // 文本消息等待状态 - loading显示
      else if (message.type === 'text') {
        return (
          <div className="flex items-center justify-center py-1">
            <LoadingAnimation />
          </div>
        );
      }
      // 语音消息等待状态 - 显示AI名称和发送语音提示
      else if (message.type === 'audio') {
        return (
          <div className="" style={getAudioBubbleWidth(message.duration)}>
            <LoadingAnimation />
            <p className='text-[0.6rem] mt-3 text-gray-400 m-0 p-0'>
              {aiName || 'AI'} {t('chat.sendingAudio')}...
            </p>
          </div>
        );
      }
    }

    // 根据消息类型渲染内容（图片、文本、音频）
    switch (message.type) {
      case 'image':

        // 新生成图片的loading状态（正在发送没有URL，或者有URL但还在渲染中），失败时不显示
        const isGeneratingNewImage = (isWaiting && !message.imageUrl) || (message.isImageGenerating && imageLoading) && message.status !== 'failed' && message.status !== 'Failure';
        // 历史记录图片的loading状态（已有URL但图片还在加载中，且不是新生成的图片），失败时不显示
        const isLoadingHistoryImage = message.imageUrl && imageLoading && !message.isImageGenerating && message.status !== 'failed' && message.status !== 'Failure';

        // 新生成图片：显示进度UI（包括图片渲染阶段）
        if (isGeneratingNewImage) {
          return (
            <div className="text-white break-words whitespace-pre-wrap">
              <div className="mb-2">
                {aiName || 'AI'} {t('chat.sendingPhoto')}
              </div>
              <div className="text-sm text-gray-400">
                {message.imageUrl ? '99%' : Math.round(progress) + '%'} · {t('chat.takeFewSeconds')}
              </div>
            </div>
          );
        }

        // 历史记录图片：使用LoadingAnimation
        if (isLoadingHistoryImage) {
          return (
            <div className="flex items-center justify-center py-1">
              <LoadingAnimation />
            </div>
          );
        }

        // 如果没有imageUrl且不在等待状态，显示错误信息
        if (!message.imageUrl) {
          return (
            <div className="text-white">
              <div className="flex items-center justify-center bg-gray-800 rounded-xl p-4">
                <div className="text-center text-gray-400">
                  <i className="fas fa-exclamation-triangle text-red-400 text-2xl mb-2"></i>
                  <div className="text-sm">{t('chat.imageUrlMissing')}</div>
                  <div className="text-xs mt-1">{t('chat.messageId')}{message.id}</div>
                </div>
              </div>
            </div>
          );
        }

        return (
          <div className="text-white">
            <div
              className={`rounded-xl overflow-hidden bg-transparent p-0 m-0 relative ${isMobile ? 'w-full' : ''
                } cursor-pointer`}
              style={{
                // 移动端：合适尺寸，保持9:16比例
                // PC端：合适的固定尺寸
                ...(isMobile ? {
                  width: '100%',
                  maxWidth: '240px', // 移动端最大宽度限制
                  height: '427px', // 移动端固定高度，按9:16比例计算：240 * 16/9 ≈ 427px
                  aspectRatio: '9/16', // 9:16比例作为备用
                } : {
                  width: '320px', // PC端固定宽度
                  height: '568px', // PC端固定高度，按9:16比例计算：320 * 16/9 ≈ 568px
                })
              }}
              onClick={() => {
                if (!imageLoading && !imageError && message.imageUrl && onImagePreview) {
                  onImagePreview(message.imageUrl);
                }
              }}
            >
              {/* 图片加载时显示loading动画 - 仅对历史记录图片显示，失败时不显示 */}
              {imageLoading && !imageError && !message.isImageGenerating && message.status !== 'failed' && (
                <div
                  className="absolute inset-0 flex items-center justify-center bg-gray-800 rounded-xl z-10"
                  style={{
                    width: '100%',
                    // 确保loading容器也保持9:16比例
                    ...(isMobile ? {
                      height: '427px', // 移动端固定高度，按9:16比例计算：240 * 16/9 ≈ 427px
                      aspectRatio: '9/16' // 作为备用
                    } : {
                      height: '568px' // PC端固定高度，按9:16比例
                    })
                  }}
                >
                  <div className="flex flex-col items-center justify-center w-full h-full">
                    {(() => {
                      return (
                        <>
                          <div className="mt-4 text-gray-300 text-sm text-center px-4">
                            {message.loadingText || t('chat.loadingImage')}
                          </div>
                        </>
                      );
                    })()}
                  </div>
                </div>
              )}

              <img
                src={processImageUrl(message.imageUrl)}
                alt={t('chat.aiGenerated')}
                className={`w-full rounded-xl transition-opacity duration-300 ${imageLoading ? 'opacity-0' : 'opacity-100'
                  }`}
                style={{
                  // 确保图片完全展示，不裁剪
                  objectFit: 'contain',
                  // 移动端：高度自适应9:16比例
                  // PC端：固定高度，按9:16比例
                  ...(isMobile ? {
                    width: '100%',
                    height: '427px', // 移动端固定高度，按9:16比例计算：240 * 16/9 ≈ 427px
                    aspectRatio: '9/16', // 作为备用
                  } : {
                    width: '320px', // PC端固定宽度
                    height: '568px', // PC端固定高度，按9:16比例
                  })
                }}
                onLoadStart={(e) => {
                  // 图片开始加载时的处理
                  // console.log('🔄 图片开始加载:', {
                  //   originalSrc: message.imageUrl,
                  //   processedSrc: processImageUrl(message.imageUrl),
                  //   messageId: message.id,
                  //   complete: e.currentTarget.complete,
                  //   isImageGenerating: message.isImageGenerating
                  // });

                  // 只有在图片不是从缓存加载时且不是新生成的图片时才显示loading
                  if (!e.currentTarget.complete && !message.isImageGenerating) {
                    setImageLoading(true);
                  }
                }}
                onLoad={(e) => {
                  // console.log('✅ 图片消息加载成功:', {
                  //   originalSrc: message.imageUrl,
                  //   processedSrc: processImageUrl(message.imageUrl),
                  //   width: e.currentTarget.naturalWidth,
                  //   height: e.currentTarget.naturalHeight,
                  //   messageId: message.id,
                  //   status: message.status,
                  //   isWaiting: isWaiting,
                  //   complete: e.currentTarget.complete
                  // });

                  // 检查组件是否已卸载
                  if (isUnmountedRef.current) {
                    // console.log('🔄 组件已卸载，跳过图片加载状态更新');
                    return;
                  }

                  // 图片加载完成，立即隐藏loading
                  setImageLoading(false);

                  // 图片加载完成后滚动到底部
                  setTimeout(() => {
                    if (!isUnmountedRef.current) {
                      scrollToBottom?.();
                    }
                  }, 100);
                }}
                onError={(e) => {
                  // console.error('❌ 图片消息加载失败:', {
                  //   originalSrc: message.imageUrl,
                  //   processedSrc: processImageUrl(message.imageUrl),
                  //   messageId: message.id,
                  //   error: e
                  // });
                  console.error('image load failed', {
                    originalSrc: message.imageUrl,
                    processedSrc: processImageUrl(message.imageUrl),
                    messageId: message.id,
                    error: e
                  });

                  // 检查组件是否已卸载
                  if (isUnmountedRef.current) {
                    // console.log('🔄 组件已卸载，跳过图片错误状态更新');
                    return;
                  }

                  // 图片加载失败，显示错误状态
                  setImageLoading(false);
                  setImageError(true);

                  e.currentTarget.onerror = null;
                }}
                loading="eager"
              />

              {/* 图片加载失败显示 */}
              {imageError && (
                <div
                  className="flex items-center justify-center bg-gray-800 rounded-xl"
                  style={{
                    width: '100%',
                    // 确保错误提示容器也保持9:16比例
                    ...(isMobile ? {
                      height: '427px', // 移动端固定高度，按9:16比例计算：240 * 16/9 ≈ 427px
                      aspectRatio: '9/16' // 作为备用
                    } : {
                      height: '568px' // PC端固定高度，按9:16比例
                    })
                  }}
                >
                  <div className="text-center text-gray-400">
                    <i className="fas fa-image text-2xl mb-2"></i>
                    <div className="text-sm">{t('chat.imageLoadFailed')}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        );

      case 'text':
        return (
          <div className="text-white break-words whitespace-pre-wrap">
            {/* 仅为兼容旧版本保留 */}
            {message.imageUrl && (
              <>
                <div
                  className="mb-3 rounded-lg overflow-hidden bg-gray-800 cursor-pointer"
                  style={{ minHeight: 60 }}
                  onClick={() => {
                    if (message.imageUrl && onImagePreview) {
                      onImagePreview(message.imageUrl);
                    }
                  }}
                >
                  <img
                    src={processImageUrl(message.imageUrl)}
                    alt="Greeting"
                    className="w-full h-auto object-cover rounded-lg"
                    onLoadStart={(e) => {
                      // 文本消息中的图片开始加载
                      if (!e.currentTarget.complete) {
                        // console.log('🔄 文本消息图片开始加载:', {
                        //   originalSrc: message.imageUrl,
                        //   processedSrc: processImageUrl(message.imageUrl),
                        //   messageId: message.id
                        // });
                      }
                    }}
                    onLoad={(e) => {
                      // console.log('✅ 图片加载成功:', {
                      //   originalSrc: message.imageUrl,
                      //   processedSrc: processImageUrl(message.imageUrl),
                      //   width: e.currentTarget.naturalWidth,
                      //   height: e.currentTarget.naturalHeight,
                      //   messageId: message.id,
                      //   complete: e.currentTarget.complete
                      // });
                      setTimeout(() => {
                        scrollToBottom?.();
                      }, 100);
                    }}
                    onError={(e) => {
                      // console.error('❌ 图片加载失败:', {
                      //   originalSrc: message.imageUrl,
                      //   processedSrc: processImageUrl(message.imageUrl),
                      //   messageId: message.id,
                      //   error: e
                      // });
                      console.error('image load failed', {
                        originalSrc: message.imageUrl,
                        processedSrc: processImageUrl(message.imageUrl),
                        messageId: message.id,
                        error: e
                      });
                      e.currentTarget.onerror = null;
                      e.currentTarget.style.display = 'none';
                      e.currentTarget.parentElement?.classList.add('image-error');
                    }}
                    loading="eager"
                    style={{ maxHeight: '300px' }}
                  />
                </div>
                <style>{`
                  .image-error:before {
                    content: "\\f1c5";
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #666;
                    font-size: 2rem;
                    height: 100%;
                    min-height: 60px;
                  }
                `}</style>
              </>
            )}
            {message.content}
            {/* {isStreaming && (
              <span className="inline-block w-2 h-4 ml-1 bg-pink-500 animate-pulse"></span>
            )} */}
          </div>
        );
      case 'audio':
        // 音频消息播放中 - 优先显示播放状态，支持点击暂停
        if (message.isPlaying) {
          return (
            <div
              className="flex items-center space-x-2 p-1 rounded transition-colors cursor-pointer"
              style={getAudioBubbleWidth(message.duration)}
              onClick={() => {
                // 只有completed或playing且有audioData时才允许暂停/重播
                if (onAudioPause && (isStatusSuccess(message.status) || message.status === 'playing') && message.audioData) {
                  onAudioPause(message.id);
                }
              }}
            >
              {/* 音频播放中显示动态音波图标 */}
              <VoiceIcon isPlaying={message.isPlaying} size={16} />
              {/* 播放时也显示时长 */}
              <span className="text-white text-sm">
                {message.duration ? formatAudioDuration(Math.max(1, message.duration)) : ''}
              </span>
            </div>
          );
        }

        // 音频消息等待中、或准备播放时 - 显示loading动画，直到开始播放
        if (!message.isPlaying && message.status !== 'playing' &&
          (isWaiting || message.status === 'sending')) {
          return (
            <div className="flex items-center justify-center py-1" style={getAudioBubbleWidth(message.duration)}>
              <LoadingAnimation />
            </div>
          );
        }

        // 移动端可播放状态 - 显示播放按钮
        if (isMobile && ((message.canPlay || isStatusSuccess(message.status)) && message.audioData) && !message.isPlaying) {
          // 计算显示的时长 - 统一使用formatAudioDuration
          let displayDuration = '';
          if (message.duration) {
            // 如果有实际时长，使用统一的格式化函数
            displayDuration = formatAudioDuration(message.duration);
          } else if (message.audioData) {
            // 如果没有时长但有音频数据，根据数据大小估算时长
            // 假设平均比特率约为 32kbps (4KB/s)，这是一个粗略估算
            const rawEstimate = Math.round(message.audioData.length / 20000);
            const estimatedSeconds = Math.max(1, rawEstimate); // 不减1秒，保持一致
            displayDuration = formatAudioDuration(estimatedSeconds);
          } else {
            // 既没有时长也没有音频数据
            displayDuration = '';
          }

          return (
            <div
              className="flex items-center space-x-2 cursor-pointer rounded p-1 transition-colors "
              style={getAudioBubbleWidth(message.duration)}
              onClick={() => {
                // console.log('🎵 [移动端] 点击播放按钮:', {
                //   messageId: message.id,
                //   hasAudioData: !!message.audioData,
                //   canPlay: message.canPlay,
                //   status: message.status,
                //   duration: message.duration,
                //   isAudioPreloaded: message.isAudioPreloaded
                // });

                // 尝试从缓存播放（如果已预加载并且有ChatService实例）
                if (message.isAudioPreloaded && chatService) {
                  const { success, source } = chatService.playAudioFromCache(message.id);
                  if (success && source) {
                    // console.log('🎵 [移动端] 从缓存播放音频:', message.id);

                    // 设置播放状态
                    if (onMobilePlayStart) {
                      onMobilePlayStart(message.id);
                    }

                    // 开始播放
                    source.start(0);

                    // 监听播放结束事件
                    source.onended = () => {
                      if (onAudioPause) {
                        onAudioPause(message.id);
                      }
                    };

                    return; // 成功从缓存播放，不再执行后续代码
                  }
                }

                // 缓存播放失败，回退到常规播放方式
                // console.log('🎵 [移动端] 常规播放音频:', message.id);
                // 直接播放audioData
                if (message.audioData && onAudioReplay) {
                  onAudioReplay(message.id, message.audioData);
                }
                // 使用手动播放
                else if (onMobilePlayStart) {
                  onMobilePlayStart(message.id);
                }
              }}
            >
              <VoiceIcon isPlaying={false} size={16} />
              {/* 显示音频时长 - 优先显示实际时长，否则估算时长 */}
              <span className="text-white text-sm">
                {displayDuration}
              </span>
            </div>
          );
        }

        // PC端可播放状态 - 显示时长并支持点击重播
        if (!isMobile && isStatusSuccess(message.status) && message.audioData && !message.isPlaying) {
          return (
            <div
              className="flex items-center space-x-2 cursor-pointer rounded p-1 transition-colors"
              style={getAudioBubbleWidth(message.duration)}
              onClick={() => {
                // console.log('🎵 点击重播音频:', {
                //   messageId: message.id,
                //   hasAudioData: !!message.audioData,
                //   status: message.status,
                //   duration: message.duration,
                //   isAudioPreloaded: message.isAudioPreloaded
                // });

                // 尝试从缓存播放（如果已预加载并且有ChatService实例）
                if (message.isAudioPreloaded && chatService) {
                  const { success, source } = chatService.playAudioFromCache(message.id);
                  if (success && source) {
                    // console.log('🎵 [PC] 从缓存播放音频:', message.id);

                    // 设置播放状态
                    if (onAudioReplay) {
                      // 使用空字符串作为audioData，因为我们已经有了缓存的音频
                      onAudioReplay(message.id, "");
                    }

                    // 开始播放
                    source.start(0);

                    // 监听播放结束事件
                    source.onended = () => {
                      if (onAudioPause) {
                        onAudioPause(message.id);
                      }
                    };

                    return; // 成功从缓存播放，不再执行后续代码
                  }
                }

                // 缓存播放失败，回退到常规播放
                // console.log('🎵 [PC] 常规播放音频:', message.id);
                if (message.audioData && onAudioReplay) {
                  onAudioReplay(message.id, message.audioData);
                } else {
                  // console.warn('🎵 无法重播：音频数据不存在', { messageId: message.id });
                  console.error('cannot replay: audio data does not exist', { messageId: message.id });
                }
              }}
            >
              <VoiceIcon isPlaying={false} size={16} />
              <span className="text-white text-sm">
                {message.duration ? formatAudioDuration(Math.max(1, message.duration)) : ''}
              </span>
            </div>
          );
        }

        // 特殊情况：PC端有status但没有audioData（可能是还未加载完成的消息）
        if (!isMobile && isStatusSuccess(message.status) && !message.audioData && !message.isPlaying) {
          return (
            <div
              className="flex items-center space-x-2 cursor-pointer rounded p-1 transition-colors"
              style={getAudioBubbleWidth(message.duration)}
            >
              <VoiceIcon isPlaying={false} size={16} />
              <span className="text-white text-sm">
                {message.duration ? formatAudioDuration(Math.max(1, message.duration)) : ''}
              </span>
            </div>
          );
        }

        // 默认情况 - 可能是状态异常，显示fallback UI
        // console.warn('🎵 音频消息状态异常:', {
        //   messageId: message.id,
        //   status: message.status,
        //   isPlaying: message.isPlaying,
        //   isMobile: isMobile,
        //   hasAudioData: !!message.audioData
        // });
        console.error('audio message state exception', {
          messageId: message.id,
          status: message.status,
          isPlaying: message.isPlaying,
          isMobile: isMobile,
          hasAudioData: !!message.audioData
        });

        return (
          <div className="flex items-center space-x-2 text-yellow-400" style={getAudioBubbleWidth(message.duration)}>
            <i className="fas fa-exclamation-triangle"></i>
            <span className="text-white text-sm">{t('chat.audioMessageError')}</span>
          </div>
        );

      default:
        return <div className="text-white">{t('chat.unsupportedMessageType')}</div>;
    }
  };

  // 渲染用户消息内容
  const renderUserMessageContent = () => {
    return (
      <div className="text-white break-words whitespace-pre-wrap text-left">
        {message.content}
      </div>
    );
  };

  // 渲染头像（在AI图片消息等待时显示Lottie动画，在AI语音消息等待时显示SVG动画）
  const renderAvatar = () => {
    // 失败状态的消息不显示loading动画
    if (isStatusFailure(message.status)) {
      return null;
    }

    // 判断是否为AI图片消息等待状态：正在发送、正在加载或者(没有图片URL且处于等待状态)
    const isAIImageWaiting = !isUser && message.type === 'image' &&
      (message.status === 'sending' || imageLoading || (isWaiting && !message.imageUrl && !imageError));

    // 判断是否为AI语音消息等待状态：正在发送或者流式传输中，但不在播放中
    const isAIAudioWaiting = !isUser && message.type === 'audio' &&
      (message.status === 'sending' || isWaiting || isStreaming) &&
      !message.isPlaying;

    // 图片消息等待时显示VoiceLoading图片
    if (isAIImageWaiting) {
      return (
        <div className="mr-1">
          <img
            src={VoiceLoading}
            alt="voice loading"
            className="w-32 h-32"
            style={{ width: '3.5rem', height: '3.5rem' }}
          />
        </div>
      );
    }

    // 语音消息等待时显示VoiceLoading图片
    if (isAIAudioWaiting) {
      return (
        <div className="mr-1">
          <img
            src={VoiceLoading}
            alt="voice loading"
            className="w-32 h-32"
            style={{ width: '3.5rem', height: '3.5rem' }}
          />
        </div>
      );
    }

    return null;
  };

  // 获取显示时间：AI消息使用receivedAt，用户消息使用timestamp
  const getDisplayTime = () => {
    if (!isUser && message.receivedAt) {
      return formatMessageTime(message.receivedAt);
    }
    return formatMessageTime(message.timestamp);
  };

  return (
    <div ref={ref} className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-6`}>
      {/* AI头像 - 只在图片消息等待时显示Lottie动画 */}
      {renderAvatar()}

      {/* 消息内容区域 */}
      <div
        style={message.type === 'image' ? { padding: 0 } : {}}
        className={`max-w-[70%] ${isUser ? 'flex flex-col items-end' : 'text-left'} ${message.type === 'image' ? 'px-0 py-0' : ''}`}
      >
        {/* 消息气泡 */}
        <div
          className={`inline-block rounded-lg break-words min-w-0 max-w-full ${isUser
            ? 'bg-pink-500 text-white rounded-br-md'
            : 'bg-gray-700 text-white rounded-bl-md'
            } ${message.type === 'image' ? 'px-0 py-0 bg-transparent shadow-none' : 'px-4 py-3'}`}
          style={isUser ? { alignSelf: 'flex-end' } : {}}
        >
          {isUser ? renderUserMessageContent() : renderAIMessageContent()}
        </div>

        {/* 语音转文字内容展开区域 - 位于气泡和时间之间 */}
        {!isUser && message.type === 'audio' && message.content && showVoiceText && (
          <div className="mt-1 p-3 bg-gray-500 rounded-sm text-white text-sm">
            {streamingText}
            {isTextStreaming && (
              <span className="inline-block w-2 h-4 ml-1 bg-pink-500 animate-pulse"></span>
            )}
          </div>
        )}

        {/* 时间戳和语音转文字按钮 */}
        <div
          style={{
            display: 'flex',
            justifyContent: isUser ? 'flex-end' : 'flex-start',
            alignItems: 'center',
            paddingLeft: isUser ? '0' : '0.2rem',
            paddingRight: isUser ? '0.2rem' : '0'
          }}
          className={`text-xs text-gray-400 ${message.type === 'image' ? 'mt-2' : 'mt-2'}`}
        >
          {/* 语音消息的语音转文字按钮 - 放在时间左侧 */}
          {!isUser && message.type === 'audio' && message.content && (
            <img
              onClick={() => setShowVoiceText(!showVoiceText)}
              src={showVoiceText ? VoiceTurnText : CloseTurnText}
              alt={showVoiceText ? t('chat.collapseText') : t('chat.voiceToText')}
              style={{ width: 18, height: 18 }}
              className='mr-1 cursor-pointer'
            />
          )}
          {getDisplayTime()}
          {/* {message.status === 'sending' && message.sender === 'user' && (
            <span className="ml-2">{t('chat.sendingMessage')}</span>
          )} */}
          {/* 时间  */}
          {isStatusFailure(message.status) && (
            <span className="ml-1 text-red-400">{t('chat.sendFailed')}</span>
          )}
        </div>
      </div>
    </div>
  );
});

export default MessageBubble; 